import React, { useState } from 'react';
import './Focus.css'
import TopBar from '../TopBar/TopBar';
import oneface from '../../assets/img/1.jpg';
import twoface from '../../assets/img/2.jpg';
import threeface from '../../assets/img/3.jpg';
import fourface from '../../assets/img/4.jpg';
import fiveface from '../../assets/img/5.jpg';
import sixface from '../../assets/img/6.jpg';
import sevenface from '../../assets/img/7.jpg';
import eightface from '../../assets/img/8.jpg';
import nineface from '../../assets/img/9.jpg';
import tenface from '../../assets/img/10.jpg';
import elevenface from '../../assets/img/11.jpg';
import twelveface from '../../assets/img/12.jpg';
import thirteenface from '../../assets/img/13.jpg';
import fourteenface from '../../assets/img/14.jpg';
import fifteenface from '../../assets/img/15.jpg';
import sixteenface from '../../assets/img/16.jpg';
import seventeenface from '../../assets/img/17.jpg';
import eighteenface from '../../assets/img/18.png';
import nineteenface from '../../assets/img/19.jpg';
import twentyface from '../../assets/img/20.jpg';
import twentyoneface from '../../assets/img/21.png';
export default function Focus(props) {
    const [focus, setfocus] = useState(1);
    let focuslist =
        [
            {
                name: "禤鹏",
                url: oneface,
            }, {
                name: "林浩文",
                url: twoface,
            }, {
                name: "陈伊晓",
                url: threeface,
            }, {
                name: "小倩",
                url: fourface,
            }, {
                name: "borupin",
                url: fiveface,
            }, {
                name: "宋浚泽",
                url: sixface,
            }, {
                name: "何佳乐",
                url: sevenface,
            }, {
                name: "食安梁馨元",
                url: eightface,
            }, {
                name: "啊威",
                url: nineface,
            }, {
                name: "Lychee",
                url: tenface,
            }, {
                name: "知心小哥哥",
                url: elevenface,
            }, {
                name: "白泽南",
                url: twelveface,
            }, {
                name: "王星池",
                url: thirteenface,
            }, {
                name: "Your name",
                url: fourteenface,
            }, {
                name: "老麦",
                url: fifteenface,
            }, {
                name: "滔滔",
                url: sixteenface,
            }, {
                name: "李岱钧",
                url: seventeenface,
            }, {
                name: "梁洪瑜",
                url: eighteenface,
            }, {
                name: "细肥",
                url: nineteenface,
            }, {
                name: "冼文龙",
                url: twentyface,
            }, {
                name: "曾子剑",
                url: twentyoneface,
            }
        ]
    function changefocus(type) {
        setfocus(type)
    }
    let title = <>
        <span className={'myfocus ' + (focus ? 'con' : '')} onClick={() => changefocus(1)}>我关注的</span>
        <span className={'focusme ' + (focus ? '' : 'con')} onClick={() => changefocus(0)}>关注我的</span>
    </>
    return (
        <div className={'focusbox ' + (props.show ? "show" : "")}>
            <TopBar title={title} back={props.hidefocus} />
            <div className="blankbox"></div>
            <div className="focuscontentbox">
                <div className="focustitle">{focus ? "已关注21人" : "21人关注我"}</div>
                {
                    focuslist.map((item, index) => (
                        <div className="focusminbox" key={index}>
                            <div className="focusimg">
                                <img src={item.url} alt="" />
                            </div>
                            <div className="focusname">{item.name}</div>
                            <div className="focusbutton">互相关注</div>
                        </div>
                    ))
                }

            </div>
        </div>
    );
}
